<template>
  <div class="liftingMatch">
    <div v-if="!loadingBox">
      <div
        v-for="(item, index) in LayoutKnockResult"
        :key="`${index}a`"
        :id="'pdfDom' + index"
      >
        <div class="group">{{ letters[index] }}组</div>
        <div class="flex">
          <div
            class="group-li"
            v-for="(curr, currIndex) in item"
            :key="`${currIndex}b`"
          >
            <div class="wheel">第{{ currIndex + 1 }}轮</div>
            <div
              class="wheel-border"
              :class="{ border: elIndex % 2 == 0, margin: elIndex % 2 != 0 }"
              v-for="(el, elIndex) in curr"
              :key="`${elIndex}c`"
            >
              <div class="site">{{ el.site }}</div>
              <div class="name">
                <span class="user_name">{{
                  el.team_name == null ? el.user_name : el.team_name
                }}</span>
                <span v-if="el.seed_num" style="color: red"
                  >({{ el.seed_num }})</span
                >
                <span class="one_limit" v-if="el.one_limit && el.one_limit != 0"
                  >({{ el.one_limit }}撒大声地所多所多)</span
                >
                <i v-if="el.sign_id == el.win_site" class="el-icon-check"></i>
              </div>
              <div
                class="score"
                style="display: flex; justify-content: flex-end"
              >
                <span
                  class="score-li"
                  v-for="(round_nums, round_numsIndex) in el.score"
                  :key="`${round_numsIndex}c`"
                >
                  <span class="point" v-if="round_nums.top != null"
                    >{{ round_nums.top
                    }}<i class="tiebreak" v-if="round_nums.tiebreak">{{
                      round_nums.tiebreak
                    }}</i></span
                  >
                  <span class="point" v-if="round_nums.bot != null"
                    >{{ round_nums.bot
                    }}<i class="tiebreak" v-if="round_nums.tiebreak">{{
                      round_nums.tiebreak
                    }}</i></span
                  >
                </span>
              </div>
            </div>
          </div>
        </div>
        <!-- </div> -->
      </div>
    </div>
    <div v-else>
      <!--                    0                              4               -->
      <!-- {{pageIndex * sliceLength}}  {{(pageIndex + 1) * sliceLength}}  
                                               <div class="group-li" v-for="(curr, currIndex) in item.slice(pageIndex * sliceLength, (pageIndex + 1) * sliceLength)" :key="`${currIndex}b`">
                                                 -->
      <div v-for="(item, index) in LayoutKnockResult" :key="`${index}a`">
        <div
          class="pdf"
          v-for="(_, pageIndex) in pdfs"
          :key="`${pageIndex}a`"
          :id="'pdfDom' + (pageIndex +( index * rightPages))"
          style="padding-top: 40px; padding-bottom: 40px; position: relative;box-sizing: border-box;"
          v-if="pageIndex * sliceLength < item.length"
        >
        <!-- {{Math.ceil(LayoutKnockResult.length / 4)}}
        {{Math.ceil(item.length / 4)}}
        {{rightPages}} -->
        <!-- {{LayoutKnockResult.length}} -->
        <!-- Math.ceil(9/4) -->
        <!-- <div
          v-for="(_, pageIndex) in pdfs"
          :key="`${pageIndex}a`"
          :id="'pdfDom' + (pageIndex + index * 4)"
          :style="pdfDomStyle(pageIndex, sliceLength, item)"
        > -->
        <!-- {{pdfs}} -->
          <template >
            <!-- 总条数：{{item.length}}  从第几条开始：{{pageIndex * sliceLength}} 到第几条：{{ (pageIndex + 1) * sliceLength}} -->
            <layoutTableHeader
              :match_name="MatchInfoLayout.com_name"
              :match_time="MatchInfoLayout.com_time"
              :match_location="MatchInfoLayout.address"
              :referee_name="MatchInfoLayout.referee_name"
              :project_name="project_name"
              id="pdfDomHeaders"
              :logo_url="MatchInfoLayout.logo"
            />
            <div class="group">{{ letters[index] }}组</div>

            <!-- {{LayoutKnockResult.length}} -->

            

            <div class="flex">
              <!-- 总条数：{{item.length}}  从第几条开始：{{pageIndex * sliceLength}} 到第几条：{{ (pageIndex + 1) * sliceLength}} -->
              <div
                class="group-li"
                v-for="(curr, currIndex) in item.slice(
                  pageIndex * sliceLength,
                  (pageIndex + 1) * sliceLength
                )"
                :key="`${currIndex}b`"
              >
                <div class="wheel">
                  第{{ currIndex + 1 + pageIndex * sliceLength }}轮
                </div>
                <div
                  class="wheel-border"
                  :class="{
                    border: elIndex % 2 == 0,
                    margin: elIndex % 2 != 0,
                  }"
                  v-for="(el, elIndex) in curr"
                  :key="`${elIndex}c`"
                >
                  <div class="site">{{ el.site }}</div>
                  <div class="name">
                    <span class="user_name">{{
                      el.team_name == null ? el.user_name : el.team_name
                    }}</span>
                    <span v-if="el.seed_num" style="color: red"
                      >({{ el.seed_num }})</span
                    >
                    <span
                      class="one_limit"
                      v-if="el.one_limit && el.one_limit != 0"
                      >({{ el.one_limit }})</span
                    >
                    <i
                      v-if="el.sign_id == el.win_site"
                      class="el-icon-check"
                    ></i>
                  </div>
                  <div
                    class="score"
                    style="display: flex; justify-content: flex-end"
                  >
                    <span
                      class="score-li"
                      v-for="(round_nums, round_numsIndex) in el.score"
                      :key="`${round_numsIndex}c`"
                    >
                      <span class="point" v-if="round_nums.top != null"
                        >{{ round_nums.top
                        }}<i class="tiebreak" v-if="round_nums.tiebreak">{{
                          round_nums.tiebreak
                        }}</i></span
                      >
                      <span class="point" v-if="round_nums.bot != null"
                        >{{ round_nums.bot
                        }}<i class="tiebreak" v-if="round_nums.tiebreak">{{
                          round_nums.tiebreak
                        }}</i></span
                      >
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import layoutTableHeader from "./layoutTableHeader";
export default {
  components: {
    layoutTableHeader,
  },
  props: {
    LayoutKnockResult: Array,
    loadingBox: Boolean,
    project_name: String,
    seed_site: String,
    drawTime: Number,
    name: String,
  },
  computed: {
    ...mapState({
      MatchInfoLayout: "MatchInfoLayout",
    }),
    rightPages(){
      return Math.ceil(this.LayoutKnockResult[0].length / 4)
      // return Math.ceil(this.LayoutKnockResult.length / 4)
    },
    letters() {
      let letters = [];
      let letters_26 = [];
      for (let i = 0; i < 26; i++) {
        letters_26.push(String.fromCharCode(65 + i));
      }
      for (let i = 0; i < 25; i++) {
        for (let x = 0; x < 26; x++) {
          letters.push(
            String.fromCharCode(65 + i + 1) + String.fromCharCode(65 + x)
          );
        }
      }
      return letters_26.concat(letters);
    },
    pdfs() {
      let sum = 0;
      for (let i = 0; i < this.LayoutKnockResult.length; i++) {
        sum = sum + this.LayoutKnockResult[i].length;
      }
      return Math.ceil(sum / 4);
    },
    sliceLength() {
      let arr = [];
      for (let i = 0; i < this.LayoutKnockResult.length; i++) {
        arr.push(this.LayoutKnockResult[i][0].length);
      }
      let rounding = Math.round(
        this.sumArr(arr) / this.LayoutKnockResult.length
      );
      let merchant = null;
      console.log("LayoutKnockResult.length", this.LayoutKnockResult.length);
      console.log("rounding", rounding);
      if (this.LayoutKnockResult.length <= 4 && rounding < 5) {
        merchant = 4;
      } else if (this.LayoutKnockResult.length > 4 && rounding < 5) {
        merchant = 4;
      } else if (
        this.LayoutKnockResult.length > 4 &&
        rounding >= 5 &&
        rounding < 8
      ) {
        merchant = 3;
      } else {
        merchant = 2;
        // merchant = 4;
      }
      // return merchant;
      return 4;
    },
  },
  methods: {
    sumArr(arr) {
      //数组求和
      var sum = 0;
      for (var i = 0; i < arr.length; i++) {
        sum += arr[i];
      }
      return sum;
    },
    pdfDomStyle(pageIndex, sliceLength, item) {
      if (pageIndex * sliceLength < item.length)
        return {
          "padding-top": "40px",
          "padding-bottom": "40px",
          position: "relative",
        };
      return {};
    },
  },
  updated(){
    let pdf = document.querySelectorAll(".pdf")
    sessionStorage.setItem("pdfLength",String(pdf.length))
  }
};
</script>

<style lang="less" scoped>
.liftingMatch {
  padding: 10px;
  box-sizing: border-box;

  .group {
    margin: 20px 0;
    font-size: 18px;
    text-align: center;
  }

  .wheel {
    text-align: center;
    font-size: 16px;
    margin-bottom: 15px;
  }

  .border {
    border-bottom: 1px #ccc solid;
  }

  .margin {
    margin-bottom: 20px;
  }

  .wheel-border {
    display: flex;
    border-right: 1px #ccc solid;
    min-height: 25px;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
  }

  .flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .group-li {
      width: 20%;
      margin: 20px;

      .user_name {
        vertical-align: middle;
      }

      .one_limit {
        display: inline-block;
        width: 60px;
        overflow: hidden;
        white-space: nowrap;
        vertical-align: middle;
      }

      .el-icon-check {
        color: red;
        font-weight: bold;
      }

      .site {
        display: inline-block;
        width: 20%;
        text-align: center;
      }

      .name {
        display: inline-block;
        max-width: 60%;
        min-width: 60%;
      }

      .score {
        display: inline-block;
        width: 20%;
        text-align: right;

        .score-li {
          display: block;
          width: 25px;
          text-align: center;
          border-right: 1px #ccc solid;

          &:last-child {
            border-right: none;
          }
        }

        .point {
          position: relative;
        }

        .tiebreak {
          position: absolute;
          top: 0;
          left: 8px;
          font-size: 10px;
        }
      }
    }
  }
}
</style>
